import React from 'react'

import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'

import './App.css'
// 定义 App 组件
class App extends React.Component {
  // 初始化状态
  state = {
    todos: [
      {
        id: '001',
        name: '吃饭',
        done: true
      },
      {
        id: '002',
        name: '睡觉',
        done: false
      },
      {
        id: '003',
        name: '打代码',
        done: false
      },
      {
        id: '004',
        name: '打游戏',
        done: false
      }
    ]
  }
  addTodo = todoObj => {
    // 获取原数组
    const { todos } = this.state
    // 追加新的数组
    const newTodos = [todoObj, ...todos]
    // 更新状态
    this.setState({ todos: newTodos })
  }

  // 改变任务状态
  changeTodo = (id, done) => {
    // 获取原数组
    const { todos } = this.state
    // 遍历数组
    const newTodos = todos.map(item => {
      if (item.id === id) return { ...item, done }
      return item
    })
    // 更新状态
    this.setState({ todos: newTodos })
  }
  // 删除任务
  deleteTodo = id => {
    // 获取原数组
    const { todos } = this.state
    // 遍历数组
    const newTodos = todos.filter(item => {
      return item.id !== id
    })
    // 更新状态
    this.setState({ todos: newTodos })
  }
  // 删除已完成任务
  deleteDone = newTodos => {
    this.setState({ todos: newTodos })
  }
  // 全选任务
  checkAllToDo = (done) => {
    const { todos } = this.state
    const newTodos = todos.map(item => {
      return { ...item, done:done }
    })
    this.setState({ todos: newTodos })
  }
  render () {
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header addTodo={this.addTodo} />
          <List
            todos={this.state.todos}
            changeTodo={this.changeTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer todos={this.state.todos} deleteDone={this.deleteDone} checkAllToDo={this.checkAllToDo} />
        </div>
      </div>
    )
  }
}

export default App
